import React, { useEffect, useState } from "react";
import { Form, Input, Button, Checkbox } from 'antd';
import ReactDOM from "react-dom";
import Index2 from './index2'
import store from '../store'
export default function Index() {
    const [obj, setObj] = useState(() => store.getState())
    // console.log(obj)
    const { value, list, object } = obj || {}
    const [text, setValue] = useState(value)
    const ChangeValue = (e) => {
        setValue(e.target.value)
        let action = {
            type: "input_change_value",
            value: e.target.value
        }
        store.dispatch(action);
    }
    const ChangeList = () => {
        let action = {
            type: "input_change_list",
            list: [...list, text]
        }
        store.dispatch(action);
    }
    useEffect(() => {
        const unsubscribe = store.subscribe(() => {
            setObj(store.getState())
        })
        return () => {
            unsubscribe();
        }
    })
    return (
        <div>
            <Input value={text} onChange={ChangeValue} ></Input>
            <br />
            {object.name}
            <br />
            <Button onClick={ChangeList}>增加数据</Button>
            {
                list.map((item, index) => {
                    return <div key={index}>
                        {item}
                    </div>
                })
            }
        </div >
    )
}
ReactDOM.render(
    <div>
        < Index />
        <Index2 />
    </div>,
    document.getElementById("root")
);